<template>
  <div ref="editorContainer" class='template-yml'></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import yaml from 'js-yaml'
import * as monaco from 'monaco-editor'
import { getYml } from "@/api/template";
const yamlContent = ref(null)
const editorContainer = ref(null)
// 在组件挂载时初始化终端
onMounted(async () => {
  const res = await getYml()
  // yamlContent.value = yaml.load(res.data)
  const editor = monaco.editor.create(editorContainer.value, {
    value: res.data,
    language: 'yaml',
    theme: 'vs-dark',
    readOnly: true,
    minimap: { enabled: true }
  })
});
</script>

<style lang='scss'>
.template-yml {
  width: 100%;
  height: 770px;
  background-color: black;
  color: white;
  box-sizing: border-box;
}
</style>